<template>
	<div>
		<el-row style="margin-bottom: 5px;">
			<el-col :span="10">

				<el-input v-model="searchForm.menuName" placeholder="请输入权限名称"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" round @click="search()">搜索</el-button>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" round @click="add()">添加顶级菜单</el-button>
			</el-col>
		</el-row>


		<el-table :data="tableData" border style="width: 100%" size="mini" :loading="true"
			row-key="menuId"
			lazy
		    :load="load"
		    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
		
		>
			
			<el-table-column type="index" label="序号" width="200"> </el-table-column>
			<el-table-column prop="menuName" label="权限名称"> </el-table-column>
			<el-table-column prop="url" label="路径"> </el-table-column>
			
			
			
			  <el-table-column label="操作">
			      <template slot-scope="scope">
					  <el-button
					    size="mini"
					    @click="addChild(scope.row.menuId)">添加下级菜单</el-button>
						
			        <el-button
			          size="mini"
			          @click="handleEdit(scope.row.menuId)">编辑</el-button>
			        <el-button
			          size="mini"
			          type="danger"
					   @click="handleDel(scope.row.menuId)"
			          >删除</el-button>
			      </template>
			    </el-table-column>
		</el-table>
		
		
			
		<el-dialog
		  title="角色管理"
		  :visible.sync="dialogVisible"
		  width="500px"
		  >
		  
		  <RoleEdit :id="id" :pid="pid"  :visible.sync="dialogVisible" v-if="dialogVisible" @flush="search()"></RoleEdit>
		  
		  
		</el-dialog>


	</div>
</template>

<script>
	import RoleEdit from './edit.vue'
	export default {
		name: 'Menu',
		components:{
			RoleEdit
		},
		data() {
			return {
				dialogVisible:false,
				searchForm: {
					menuName: ''
				},
				pid:'',
				
				tableData: []
			}
		},
		methods: {
			handleDel(id){
				
				this.$confirm("确认删除?", "删除").then(()=>{
					let url = '/api/menu/deleteById';
					this.http.get(url, (success) => {
						this.$message({
							message: '删除成功',
							type: 'success'
						});
						
						this.list();
						
					}, {id:id})
					
				}).catch(()=>{
					alert("点击了取消")
				})
				
			},
			handleEdit(id){				
				this.id = id;
				this.dialogVisible = true;
			},
			add(){
				//打开添加的页面
				this.id = null;
				this.dialogVisible = true;
			},
			addChild(id){
				//打开添加的页面
				this.id = null;
				this.pid = id;
				
				console.log("this.pid",this.pid)
				
				this.dialogVisible = true;
			},
			search() {
				//让页号到1
				// this.searchForm.current=1
				this.list();
			},
			list() {
				//查询定级菜单
				let url = '/api/menu/list';
				this.http.get(url, (list) => {
					// alert(111)
					this.tableData = [];
					this.tableData = list;
					
					console.log(this.tableData);
					
					
					
					
				}, this.searchForm)
			},
			load( treeNode,tree, resolve){
				console.log("treeNode",treeNode)
				console.log("tree",tree)
				let url = '/api/menu/list';
				this.http.get(url, (list) => {
					// this.tableData = list;
					resolve(list)
				}, {parentId:treeNode.menuId})
				
			}
		},
		created() {
			this.list()
		}
	}
</script>

<style>
</style>
